<template>
    <van-nav-bar
        title="商品分类"
        fixed
    />

    <div style="height: 46px;"></div>

    <van-tree-select
        v-model:main-active-index="activeIndex"
        height="86vh"
        :items="TypeList"
        @click-nav="onClickNav"
    >
        <template #content>
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list
                    v-model:loading="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                >
                    <!-- <div class="aui-flex-links">
                        <router-link
                            v-for="item in list"
                            :key="item.id"
                            :to="{path:'/product/product/info',query:{proid:item.id}}"
                            class="aui-flex-links-item"
                        >
                            <div class="aui-flex-links-img" style="width:10vw;height:10vw"><img :src="item.thumb_cdn" alt="" style="width:10vw;height:10vw"/></div>
                            <div class="aui-flex-links-text" style="width:10vw;height:10vw">{{ item.name }}</div>
                        </router-link>
                    </div> -->

                    <ul>
				        <li v-for="item in list"
                            :key="item.id">
                            <router-link
                            
                            :to="{path:'/product/product/info',query:{proid:item.id}}"
                        >
					        <img :src="item.thumb_cdn" alt="" />
					        
                            </router-link>
                            <p class="aui-flex-links-text" >{{ item.name }}</p>
				        </li>
			        </ul>

                </van-list>
            </van-pull-refresh>

        </template>
    </van-tree-select>


    <Footer />
</template>
<script setup>
import Footer from '../../common/Footer.vue';
import { getCurrentInstance, ref, onMounted } from 'vue';

const { proxy } = getCurrentInstance();

const TypeList = ref([]);
const activeIndex = ref(0);
const typeid = ref(0);
const refreshing = ref(false);
const loading = ref(false);
const finished = ref(false);
const page = ref(1);
const limit = ref(10);
const list = ref([]);
const listCount = ref(0);

const onClickNav = (index) => {
    activeIndex.value = index;

    typeid.value = TypeList.value[index].id;

    onRefresh();
}

const onLoad = () => {
    if(!refreshing && list.value.length < listCount.value)
    {
        page.value = page.value + 1;
    }

    if(refreshing)
    {
        list.value = [];
        page.value = 1;

        setTimeout(() => {
            refreshing.value = false;
        },1500);
    }

    setTimeout(() => {
        getProductData();
    },1500);
}

const onRefresh = () => {
    finished.value = false;
    loading.value = true;
    refreshing.value = true;

    onLoad();    
}

const getProductData = async () => {
    let data = {
        typeid:typeid.value
    }
    // console.log(typeid.value);
    let result = await proxy.$api.TypeProduct(data);
    
    if(result.code === 0)
    {
        finished.value = true;
        return;
    }else{
        finished.value = false;
        loading.value = false;

        listCount.value = result.data.count;
        list.value = list.value.concat(result.data.list);

        if(list.value.length == listCount.value)
        {
            finished.value = true;
        }
        
        return;

    }

}

const getTypeData = async () => {
    
    let result = await proxy.$api.TypeIndex();

    let TypeData = [];
    TypeData.push({
            text:'全部',
            id:'0'
        });
    // console.log(result.data);
    for(let item of result.data)
    {
        TypeData.push({
            text:item.name,
            id:item.id
        });
    }
    // console.log(TypeData);
    TypeList.value = TypeData;

}

onMounted(() => {
    getTypeData();
    getProductData();
});

</script>

<style scoped>

*{
	margin: 0;
	padding: 0;
}
ul{
	display: flex;
	align-content: center;
	flex-wrap: wrap;
}
li{
	margin-bottom: 2vw;
}
li img{
	width: 20vw;
	height: 20vw;
	margin-right: 2vw;
}
li p{
	text-align: center;
	/* margin-right: 1vw; */
}

</style>